<template>
    
    <div class="wrop flex fdc fg1">
        <h1 class="mb-30">General Settings</h1>
        <div class="wrop-content">
            <el-form
                :model="form" 
                label-width="120px" 
                :size="size"
                :label-position="labelPosition">
                <el-form-item label="Site Title">
                    <el-input v-model="form.SiteTitle" />
                </el-form-item>
                <el-form-item  label="Tagline">
                    <div class="flex fg1 fdc">
                        <el-input v-model="form.Tagline" />
                        <p class="tishi">In a few words, explain what this site is about.</p>
                    </div>
                </el-form-item>
                <el-form-item label="WordPress Address (URL)">
                    <el-input v-model="form.WordPressAddress" />
                    </el-form-item>
                <el-form-item label="Site Address (URL)">
                    <div class="flex fg1 fdc">
                        <el-input v-model="form.SiteAddress" />
                        <p class="tishi">Enter the address here if you want your site home page to be different from your WordPress installation directory.</p>
                    </div>
                </el-form-item>
                <el-form-item label="Administration Email Address">
                    <div class="flex fdc">
                        <el-input v-model="form.Email" />
                        <p class="tishi">This address is used for admin purposes. If you change this, we will send you an email at your new address to confirm it. The new address will not become active until confirmed.</p>
                    </div>
                </el-form-item>
                <el-form-item label="Membership">
                    <el-checkbox-group v-model="form.Membership">
                        <el-checkbox label="Anyone can register" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="New User Default Role">
                <el-select v-model="form.addUser" placeholder="Subscriber">
                    <el-option label="Subscriber" value="1" />
                    <el-option label="Contributor" value="2" />
                    <el-option label="Author" value="3" />
                    <el-option label="Editor" value="4" />
                    <el-option label="Administrator" value="5" />
                </el-select>
                </el-form-item>
                <el-form-item label="Site Language">
                <el-select v-model="form.SiteLanguage" placeholder="English">
                    <el-option label="e1" value="e1" />
                    <el-option label="e2" value="e2" />
                </el-select>
                </el-form-item>
                <el-form-item label="Timezone">
                    <el-select v-model="form.Timezone" placeholder="UTC+0">
                            <el-option label="u1" value="u1" />
                            <el-option label="u2" value="u2" />
                    </el-select>
                    <div class="flex fg1 fdc">
                        <p class="tishi">
                            Choose either a city in the same timezone as you or a UTC (Coordinated Universal Time) time offset.
                            Universal time is 2023-01-10 02:23:40.
                        </p>
                    </div>
                </el-form-item>
                <el-form-item label="Week Starts On">
                    <el-select v-model="form.WeekStartsOn" placeholder="Sunday">
                        <el-option label="Sunday" value="d1" />
                        <el-option label="Monday" value="d2" />
                        <el-option label="Tuesday" value="d3" />
                        <el-option label="Wednesday" value="d4" />
                        <el-option label="Thursday" value="d5" />
                        <el-option label="Friday" value="d6" />
                        <el-option label="Saturday" value="d7" />
                    </el-select>
                </el-form-item>
                <el-button class="mb-30" type="primary" @click="onSubmit">Save changes</el-button>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref} from 'vue'

const labelPosition = ref('left')
const size = ref('large')
const form = reactive({
    SiteTitle: '',
    Tagline: '',
    WordPressAddress: '',
    SiteAddress: '',
    Email: '',
    addUser: '',
    SiteLanguage: '',
    WeekStartsOn:'',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const onSubmit = () => {
    console.log('submit!')
}
</script>

<style lang="less" scoped>

.wrop{
    background: #f1f1f1;
        &-content{
            overflow:auto;
                .el-form{
                    &-item{
                        padding: 0px 10px 0px 10px;
                            ::v-deep  .el-form-item__label{
                                font-weight: bold;
                                color: black;
                                font-size: 15px;
                            }
                            .tishi{
                                font-style:italic;
                                color: rgb(161, 159, 159);
                            }
                            &__content{
                                .el-input--large{
                                    ::v-deep  {
                                        width: 50%;
                                    } 
                                }
                            }
                            ::v-deep .el-form-item__label{
                                width: 220px !important;
                            }
                    }
                }
                
        } 
    
}
// 滚动条
.wrop-content::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 5px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
}

    /* 滚动条上的滚动滑块 */
.wrop-content::-webkit-scrollbar-thumb {
        background-color: #cdcecf;
        border-radius: 32px;
}
// 滚动条end
</style>